<template>
<div style="margin:0 auto 30px">
  <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      @select="handleSelect"
      background-color="#876c5f"
      text-color="#fff"
      active-text-color="#fff"
      style="padding-left: 70px;">
    <el-menu-item index="1">综合排序</el-menu-item>
    <el-menu-item index="2">销量</el-menu-item>
    <el-submenu index="3">
      <template slot="title" style="background-color: white">价格</template>
      <el-menu-item index="3-1" >价格升序</el-menu-item>
      <el-menu-item index="3-2">价格降序</el-menu-item>
    </el-submenu>
    <el-menu-item index="4">最新</el-menu-item>
  </el-menu>
  <div style="width: 1200px;margin:0px auto" v-if="isExistProduct">
    <!--  按搜索展示商品开始  -->
    <div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="p in productArr" style="margin-top: 10px;margin-bottom: 10px">
          <el-card style="padding-bottom: 10px">
            <div style="padding: 10px">
              <a :href="'/detail?id='+p.id"><img class="p_img" :src="p.url" width="100%"></a>
            </div>
            <div style="width:100%">
              <a :href="'/detail?id='+p.id" style="color: #3f3f3f;text-decoration: none">
                <p style="font-size: 15px;margin: 0;height: 30px;padding-left: 20px">{{ p.name }}</p>
              </a>
              <div style="color: #6c6c6c">
                <span style="margin-left: 20px;color: red;font-weight: bold">￥{{ p.discountPrice }} </span>
                <span style="font-size: 12px;
                                text-decoration: line-through">{{ p.fixedPrice }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--  按分类展示商品结束  -->
  </div>
  <div v-else="isExistProduct">
    <el-empty description="没有相关商品" style="background-color: white"></el-empty>
  </div>
</div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      activeIndex: '1',
      productArr: [],
      isExistProduct:true,

    }
  },
  created() {
    //得到地址栏中的商品id
    let wd = location.search.split("=")[1];

    let productUrl = 'http://localhost:8080/products/getProductsBySearch/'+wd
    axios.get(productUrl).then((response) => {
      let json = response.data
      if (json.data!='') {
        this.isExistProduct=true
        this.productArr = json.data
        const data = {wd: wd};
        sessionStorage.setItem('_word', JSON.stringify(data));
      }else {
        this.isExistProduct=false
      }
    })
  },
  methods: {
    handleSelect(index) {
      let wd = JSON.parse(sessionStorage.getItem('_word')).wd
      let productUrl = 'http://localhost:8080/products/getProductsBySearch/'+wd+'/'+index
      axios.get(productUrl).then((response) => {
        let json = response.data
        this.productArr = json.data
      })
    }
  }
}
</script>
<style>
.card {
  border-radius: 0;
}
</style>

